<template>
    <el-card>
        <template #header>
            <span>客户管理</span>
        </template>
        <el-form :inline="true">
            <el-form-item><el-button type="primary" @click="dialogVisible=true">新增</el-button></el-form-item>
            <el-form-item >
                <el-select v-model="searchForm.industry" placeholder="请选择所属行业" clearable>
                    <el-option v-for="item in industryArr" :label="item.text" :value="item.n" :key="item.n" />
                </el-select>
            </el-form-item>
            <el-form-item >
                <el-select v-model="searchForm.state" placeholder="请选择跟进情况" clearable>
                    <el-option v-for="item in stateArr" :label="item.text" :value="item.n" :key="item.n" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input v-model="searchForm.company" clearable placeholder="请输入单位名称"/>
            </el-form-item>
            <el-form-item>
                <el-button :icon="Search" square type="primary" @click="getData" />
            </el-form-item>
        </el-form>
        <el-table :data="customerData">
            <el-table-column label="序号" prop="id" align="center"></el-table-column>
            <el-table-column label="单位名称" prop="company" align="center"></el-table-column>
            <el-table-column label="所属行业" prop="industry" align="center"></el-table-column>
            <el-table-column label="所属省份" prop="province" align="center"></el-table-column>
            <el-table-column label="联络人姓名" prop="name" align="center"></el-table-column>
            <el-table-column label="联系电话" prop="phone" align="center" width="130px"></el-table-column>
            <el-table-column label="职称" prop="title" align="center"></el-table-column>
            <el-table-column label="业务需求" prop="needs" align="center" show-overflow-tooltip></el-table-column>
            <el-table-column label="跟进人" prop="username" align="center"></el-table-column>
            <el-table-column label="跟进情况" prop="state" align="center"></el-table-column>
            <el-table-column label="操作" align="center" justify="middle">
                <template #default="{ row }">
                    <el-button type="success" :icon="Edit" circle @click="handleEdit(row.id)"/>
                    <el-button type="danger" :icon="Delete" circle @click="handleDelete(row.id)"/>
                </template>
            </el-table-column>
        </el-table>
        <el-row justify="center">
            <el-pagination background layout="prev, pager, next" :total="total" v-model:page-size="pageSize"
                v-model:current-page="page" @current-change="getData" />
        </el-row>
        <el-dialog v-model="dialogVisible" title="新增成员" width="600">
            <el-form  :model="addForm" :rules="rules" ref="formIns"  class="add">
                <el-form-item label="单位名称" prop="company" >
                    <el-input v-model="addForm.company"></el-input>
                </el-form-item>
                <el-form-item label="所属行业" prop="industry" >
                    <el-select v-model="addForm.industry" placeholder="请选择行业" clearable>
                        <el-option v-for="item in industryArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属省份" prop="province">
                    <el-select v-model="addForm.province" placeholder="请选择省份" clearable>
                        <el-option v-for="item in provinceArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系人姓名" prop="name" label-width="95px">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="addForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="联系人职称" prop="title" label-width="95px">
                    <el-input v-model="addForm.title"></el-input>
                </el-form-item>
                <el-form-item label="跟进情况" prop="state">
                    <el-select v-model="addForm.state" placeholder="请选择跟进情况" clearable>
                        <el-option v-for="item in stateArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="跟进人" prop="mid">
                    <el-select v-model="addForm.mid" placeholder="请选择跟进情况" clearable>
                        <el-option v-for="item in managerData" :label="item.username" :value="item.id" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="业务需求" prop="needs">
                    <el-input v-model="addForm.needs" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleAdd">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisible2" title="编辑成员" width="600">
            <el-form  :model="editForm" :rules="rules" ref="formIns2" >
                <el-form-item label="单位名称" prop="company" >
                    <el-input v-model="editForm.company"></el-input>
                </el-form-item>
                <el-form-item label="所属行业" prop="industry" >
                    <el-select v-model="editForm.industry" placeholder="请选择行业" clearable>
                        <el-option v-for="item in industryArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="所属省份" prop="province">
                    <el-select v-model="editForm.province" placeholder="请选择省份" clearable>
                        <el-option v-for="item in provinceArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="联系人姓名" prop="name" label-width="95px">
                    <el-input v-model="editForm.name"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                    <el-input v-model="editForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="联系人职称" prop="title" label-width="95px">
                    <el-input v-model="editForm.title"></el-input>
                </el-form-item>
                <el-form-item label="跟进情况" prop="state">
                    <el-select v-model="editForm.state" placeholder="请选择跟进情况" clearable>
                        <el-option v-for="item in stateArr" :label="item.text" :value="item.n" :key="item.n" />
                    </el-select>
                </el-form-item>
                <el-form-item label="跟进人" prop="mid">
                    <el-select v-model="editForm.mid" placeholder="请选择跟进情况" clearable>
                        <el-option v-for="item in managerData" :label="item.username" :value="item.id" :key="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="业务需求" prop="needs">
                    <el-input v-model="editForm.needs" type="textarea"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">
                        提交
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </el-card>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { getCustomer, getManager,addCustomer,delCustomer,oneCustomer,edtCustomer } from "@/api/api";
import { Search ,Delete,Edit} from '@element-plus/icons-vue';
import type { FormInstance, FormRules } from "element-plus";
import { ElMessage, ElMessageBox } from 'element-plus';
//所需数据
const industryArr=[
    {n:1,text:"风力"},
    {n:2,text:"电力"},
    {n:3,text:"农业"},
    {n:4,text:"水利"},
    {n:5,text:"林业"},
    {n:6,text:"应急"},
    {n:7,text:"省市县一体化"},
    {n:8,text:"煤矿"},
    {n:9,text:"消防武警"},
    {n:10,text:"企业"},
    {n:11,text:"数据服务"},
    {n:12,text:"政府机关"},
    {n:13,text:"新能源"},
    {n:14,text:"地址"},
    {n:15,text:"内涝"},
    {n:16,text:"保险"},
    {n:17,text:"天然氧吧"},
    {n:18,text:"气候可行性论证"},
    {n:19,text:"影视及广告"},
    {n:20,text:"直属兄弟单位"},
    {n:21,text:"气候好产品"},
    {n:22,text:"气象灾害风险普查"},
    {n:23,text:"三大运营商"},
    {n:24,text:"高速交通"}
    ];
const stateArr=[{n:1,text:"未跟进"},{n:2,text:"跟进中"},{n:3,text:"已合作"}];
const provinceArr=[
    {n:1,text:"北京"},
    {n:2,text:"安徽省"},
    {n:3,text:"甘肃省"},
    {n:4,text:"广东省"},
    {n:5,text:"广西壮族自治区"},
    {n:6,text:"贵州省"},
    {n:7,text:"海南省"},
    {n:8,text:"河北省"},
    {n:9,text:"河南省"},
    {n:10,text:"黑龙江省"},
    {n:11,text:"湖北省"},
    {n:12,text:"湖南省"},
    {n:13,text:"吉林省"},
    {n:14,text:"江苏省"},
    {n:15,text:"江西省"},
    {n:16,text:"辽宁省"},
    {n:17,text:"内蒙古自治区"},
    {n:18,text:"宁夏回族自治区"},
    {n:19,text:"青海省"},
    {n:20,text:"山东省"},
    {n:21,text:"山西省"},
    {n:22,text:"陕西省"},
    {n:23,text:"上海"},
    {n:24,text:"四川省"},
    {n:25,text:"天津"},
    {n:26,text:"西藏自治区"},
    {n:27,text:"新疆维吾尔自治区"},
    {n:28,text:"云南省"},
    {n:29,text:"浙江省"},
    {n:30,text:"重庆"},
    {n:31,text:"香港"},
    {n:32,text:"澳门"},
    {n:33,text:"台湾"},
]
//查询
const customerData = ref<CustomerData[]>([]);
const pageSize = ref(5);
const total = ref(0);
const page = ref(1);
const getData = async () => {
    const option: CustomerQuery = {
        page: page.value,
        limit: pageSize.value
    }
    if (searchForm.industry) {
        option.industry=searchForm.industry;
    }
    if (searchForm.state) {
        option.state=searchForm.state;
    }
    if (searchForm.company) {
        option.company=searchForm.company;
    }
    const res = await getCustomer(option);
    customerData.value = res.data.data;
    for (let i = 0; i < customerData.value.length; i++) {
        let tem=customerData.value[i].industry;
        customerData.value[i].industry=industryArr[tem as number-1].text;
        tem=customerData.value[i].province;
        customerData.value[i].province=provinceArr[tem as number-1].text;
        tem=customerData.value[i].state;
        customerData.value[i].state=stateArr[tem as number -1].text;
    }
    total.value = res.data.total;
}
const searchForm = reactive({
    industry:null,
    state:null,
    company:""
})
const managerData = ref<ManagerData[]>();
onMounted(async () => {
    getData();
    const res = await getManager({ page: 1, limit: 20 });
    managerData.value = res.data.data;
})
//新增
const dialogVisible = ref(false);
const addForm = reactive<Partial<CustomerData>>({
    company:"",
    industry:null,
    province:null,
    name:"",
    phone:"",
    title:"",
    state:null,
    mid:null,
    needs:"",
});
const rules: FormRules = {
    company: { required: true, message: "请输入单位名称", trigger: "blur" },
    industry: { required: true, message: "请选择所在行业", trigger: "blur" },
    province: { required: true, message: "请选择所在省份", trigger: "blur" },
    name: { required: true, message: "请输入联系人姓名", trigger: "blur" },
    phone: { required: true, message: "请输入联系电话", trigger: "blur" },
    title: { required: true, message: "请输入联系人职称", trigger: "blur" },
    state: { required: true, message: "请选择跟进情况", trigger: "blur" },
    mid: { required: true, message: "请选择跟进人", trigger: "blur" },
    needs: { required: true, message: "请输入业务需求", trigger: "blur" },
}
const formIns = ref<FormInstance>();
const handleAdd=()=>{
    formIns.value?.validate(async (v) => {
        if (v) {
            const res = await addCustomer(addForm);
            if (res.data.code === 200) {
                ElMessage.success("新增成功");
                dialogVisible.value = false;
                formIns.value?.resetFields();
                getData();
            } else {
                ElMessage.error(res.data.msg);
            }
        }
    })
}
//删除
const handleDelete=async (id:number)=>{
    try {
        await ElMessageBox.confirm(
            '确认删除当前角色吗?确认继续',
            '警告',
            {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning',
            }
        );
        const res = await delCustomer(id);
        if (res.data.code === 200) {
            ElMessage.success("删除成功");
            getData();
        } else {
            ElMessage.error("删除失败");
        }
    } catch (e) {
        ElMessage.info("取消删除")
    }
}
//编辑
const dialogVisible2 = ref(false);
const editForm = ref<CustomerData>({
    id:0,
    company:"",
    industry:null,
    province:null,
    name:"",
    phone:"",
    title:"",
    state:null,
    mid:null,
    needs:"",
});
const formIns2 = ref<FormInstance>();
const handleEdit = async (id: number) => {
    dialogVisible2.value = true;
    const res = await oneCustomer(id);
    editForm.value = res.data.data;
}
const  handleSubmit = async () => {
    try {
        await formIns2.value?.validate();
        const res = await edtCustomer(editForm.value.id, editForm.value);
        if (res.data.code === 200) {
            ElMessage.success("更新成功");
            dialogVisible2.value = false;
            getData();
        } else {
            ElMessage.error(res.data.msg);
        }
    } catch (error) {
        throw error;
    }
}
</script>
<style scoped>
.el-row {
    height: 60px;
}
.el-select {
    width: 200px;
}
</style>